<template>
  <view class="login-body">
    <view class="content">
      <view class="title">欢迎来到<text style="color: #FF8F1F">旭之鑫</text>订货商城！</view>
      <view class="text">当前还不是会员身份，暂无法查看价格、订货下单等操作，请添加平台客服申请开通会员权限。</view>
      <view class="qrcode">
        <view class="qrcode-img">
          <image class="img" show-menu-by-longpress :src="sysConfig.kf_wx_qrcode.value" mode="widthFix" />
        </view>
        <!-- <view class="qrcode-text">微信号：</view> -->
      </view>
    </view>
    <view class="footer"><text class="iconfont icon-fingerprint" ></text><text>长按识别二维码</text></view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore();
const sysConfig = computed(()=> {
  return store.state.app.config
})
async function onGetphoneNumber(event) {
  const code = event.detail.code
  try {
    await store.dispatch('user/userLogin', { code });
  } finally {

  }
}
</script>

<style lang="scss" scoped>
.login-body{
  width: 686rpx;
  background: #fff;
  text-align: center;
  border-radius: 20rpx;
  overflow: hidden;
  .content{
    padding: 72rpx 0;
  }
  .title{
    font-weight: 400;
    font-size: 40rpx;
    color: #333333;
    line-height: 48rpx;
    margin-bottom: 24rpx;
  }
  .text{
    padding: 0 28rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    line-height: 48rpx;
    text-align: center;
  }
  .qrcode{
    .qrcode-img{
      //width: 400rpx;
      display: flex;
      justify-content: center;
      .img{
        width: 400rpx;
      }
    }
    .qrcode-text{
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
      line-height: 32rpx;
      text-align: center;
    }
  }
  .footer{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120rpx;
    background: #FF8F1F;
    font-weight: 400;
    font-size: 32rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    gap: 8rpx;
    .iconfont{
      font-size: 40rpx;
    }
  }

}
</style>
